<template>
  <!-- 新增视频 -->
  <el-dialog
    :visible.sync="delFileModal"
    width="800px"
    :modal-append-to-body="false"
  >
    <div slot="title">
      <div class="dialog-title">删除素材</div>
      <div class="dialog-sub">
        已选择共计{{ selectedList.length }}个素材
        <!-- ，其中1个素材被占用 -->
      </div>
      <div class="tip">
        <i class="el-icon-warning color-red" />
        以下素材已被剪辑功能使用，删除素材后可能导致使用中的业务无法正常使用
      </div>
    </div>

    <div class="table-box">
      <el-table
        ref="mainTable"
        :data="tableData"
        tooltip-effect="light"
        style="width: 100%"
        size="mini"
        header-row-class-name="mao-table-head"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="productName" label="名称" width="300" />
        <el-table-column prop="composeTask" label="关联剪辑任务" />
        <el-table-column prop="productConvertStatus" label="剪辑任务状态" />
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer flex-b align-center">
      <div class="flex align-center">
        <el-checkbox
          v-model="checked"
        >我已确定素材删除的风险，依旧要删除资源</el-checkbox>
      </div>
      <div class="flex align-center">
        <el-button @click="delFileModal = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </span>
  </el-dialog>
</template>
<script>
import { batchDel } from '@/api/product'
export default {
  props: {
    tableData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      delFileModal: false,
      selectedList: [],
      checked: false
    }
  },
  computed: {
    imgList() {
      return this.fileList.map((item) => item.url)
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedList = val
    },
    open() {
      this.delFileModal = true
    },
    async submit() {
      const res = await batchDel({
        ids: this.selectedList.map((item) => item.id.toString()).join(',')
      })
      if (res.success) {
        this.delFileModal = false
        this.$emit('get', this.selectedList)
        this.$message.success('删除成功')
        this.$emit('refresh')
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.tip {
  box-sizing: border-box;
  padding: 12px 20px;
  background: rgba(0, 119, 255, 0.3);
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  margin-top: 10px;
}
.dialog-title {
  font-size: 20px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.dialog-sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  margin-top: 10px;
}
.dialog-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.dialog-video-list {
  margin-top: 20px;
  .video-item {
    margin-right: 12px;
    margin-bottom: 12px;
    .img-layer {
      display: none;
    }
    &:hover {
      .img-layer {
        display: flex;
      }
    }
    .img {
      width: 90px;
      height: 90px;
      border-radius: 15px;
    }
  }
}
.uplod-box {
  width: 90px;
  height: 90px;
  border-radius: 15px;
  border: 0.5px dashed rgba(128, 128, 128, 1);
  margin-right: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
  .upload {
    width: 28px;
    margin-bottom: 6px;
  }
}

.mb {
  margin-bottom: 15px;
}
</style>
